<script setup lang="ts">
import {NIcon} from "naive-ui";
import app from "@renderer/utils/app"
import {
  FaceId as Logo,
  Minus as Minus,
  X as Close
} from '@vicons/tabler';

const props = defineProps({
  background: {
    type: String,
    required: false,
    default: "#222222"
  }
})

const minimize = () => {
  app.minimize()
}
const close = () => {
  app.exit()
}
</script>

<template>
  <div class="dreamer-layout" :style="{background: props.background}">
    <div class="dreamer-layout-title-bar">
      <div class="title">
        <n-icon>
          <Logo />
        </n-icon>
        佳美会员管理系统
      </div>
      <div class="tool">
        <n-button text class="minimize" @click="minimize">
          <template #icon>
            <n-icon>
              <Minus />
            </n-icon>
          </template>
        </n-button>
        <n-button text class="close" @click="close">
          <template #icon>
            <n-icon>
              <Close />
            </n-icon>
          </template>
        </n-button>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<style scoped lang="less">
:deep(.n-form-item-label){
  color: #f2f2f2;
}
.dreamer-layout{
  background-image: url("@renderer/assets/images/bg.png");
  background-repeat: repeat-x;
  padding: 0 15px 15px 15px;
  .dreamer-layout-title-bar{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    user-select: none;
    -webkit-app-region: drag;
    .title{
      color: #ffffff;
      line-height: 40px;
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      text-shadow: 0 0 5px #666;
      letter-spacing: 1px;
    }
    .tool{
      user-select: none;
      -webkit-app-region: no-drag;
      display: flex;
      .minimize, .close {
        color: #ffffff;
        margin-left: 15px;
        cursor: pointer;
      }

    }
  }
}

</style>
